/* RESONANCE Concept - Global CX Forum 2026 
   Visual Identity: Tech, Fluidity & Neon-Dark Customer Experience
*/

:root { 
  /* Paleta Base Oscura */
  --bg-dark: #0f1431;
  --footer-brand: #55528d;
  --bg-card: rgba(20, 20, 35, 0.6);
  
  /* Colores de Marca y Neón */
  --brand: #55528d; 
  --brand-gradient: linear-gradient(135deg, #55528d 0%, #7b78b5 100%);
  --neon-purple: #a29bfe;
  --neon-pink: #ff007f;
  --neon-blue: #00d2ff;
  --neon-glow: rgba(162, 155, 254, 0.4);
  
  /* Textos */
  --text-main: #ffffff;
  --text-muted: #a0a0b8;
  
  /* Efectos */
  --glass-border: rgba(162, 155, 254, 0.15);
  --transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Base Global --- */
html, body { 
  font-family: 'Inter', system-ui, sans-serif; 
  background-color: var(--bg-dark);
  color: var(--text-main);
  scroll-behavior: smooth;
}

/* --- Fondo Dinámico (Resonance Layer) --- */
.white-overlay {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: radial-gradient(circle at 80% 20%, rgba(85, 82, 141, 0.15), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(0, 210, 255, 0.05), transparent 60%),
              rgba(10, 10, 18, 0.92);
  backdrop-filter: blur(12px);
}

/* --- Animaciones --- */
@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes neon-radar {
  0% { 
    transform: scale(0.8); 
    opacity: 1; 
    border-width: 2px; 
  }
  100% { 
    transform: scale(3); 
    opacity: 0; 
    border-width: 0px; 
  }
}

@keyframes radioactive-pulse {
  0% { 
    box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.7), inset 0 0 20px rgba(255, 0, 127, 0.2); 
    border-color: #ff007f; 
  }
  70% { 
    box-shadow: 0 0 0 15px rgba(255, 0, 127, 0), inset 0 0 40px rgba(255, 0, 127, 0.6); 
    border-color: #ff5e9e; 
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(255, 0, 127, 0), inset 0 0 20px rgba(255, 0, 127, 0.2); 
    border-color: #ff007f; 
  }
}

@keyframes blink-text {
  0%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 10px white; 
  }
  50% { 
    opacity: 0.5; 
    text-shadow: none; 
  }
}

@keyframes shine-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

main section > div {
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- Tarjetas Estilo "Cyber-Glass" --- */
.rounded-2xl {
  background: var(--bg-card) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: var(--transition-smooth);
}

.rounded-2xl:hover {
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 25px rgba(162, 155, 254, 0.15), 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}

/* --- Tipografía --- */
h1, h2, h3, .font-bold, .font-semibold {
  color: var(--text-main) !important;
  letter-spacing: 0.02em;
}

.text-neutral-600, .text-neutral-700, .text-sm, p {
  color: var(--text-muted) !important;
}

/* --- Header --- */
header {
  border-bottom: 1px solid rgba(162, 155, 254, 0.1);
  background: rgba(10, 10, 18, 0.6);
  backdrop-filter: blur(10px);
}

header h1 {
  background: linear-gradient(to right, #ffffff 20%, var(--neon-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 15px rgba(162, 155, 254, 0.5));
  font-weight: 900;
  text-transform: uppercase;
}

header span.rounded-full.bg-\[color\:var\(--brand\)\] {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--neon-pink) !important;
  box-shadow: 0 0 10px var(--neon-pink);
  position: relative;
}

header span.rounded-full.bg-\[color\:var\(--brand\)\]::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--neon-pink);
  opacity: 0;
  animation: neon-radar 2s infinite cubic-bezier(0, 0, 0.2, 1);
}

header p.rounded-full {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(162, 155, 254, 0.3) !important;
  color: #ffffff !important;
  backdrop-filter: blur(5px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* --- Chips de Hora --- */
span.inline-flex.h-6, 
span.inline-flex.h-9, 
span.inline-flex.h-10, 
span.inline-flex.h-12 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--neon-blue) !important;
  text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);
  font-family: 'Inter', monospace;
}

/* --- List Items --- */
li[id] {
  border-left: none !important; 
  transition: all 0.3s ease;
}

li[id]:hover {
  border-left: none !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%) !important;
  box-shadow: inset 0 0 20px rgba(162, 155, 254, 0.05);
  transform: translateX(4px);
  padding-left: 1.5rem !important;
}

/* --- Estado "EN VIVO" --- */
[id].is-live-active {
  background: linear-gradient(135deg, rgba(255, 0, 127, 0.15) 0%, rgba(10, 10, 18, 0.8) 100%) !important;
  border: 2px solid #ff007f !important;
  animation: radioactive-pulse 2s infinite;
  position: relative;
  z-index: 20;
  transform: scale(1.02);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: visible !important;
  border-radius: 16px !important;
}

[id].is-live-active::after {
  content: '● EN ESTE MOMENTO';
  position: absolute;
  top: -14px !important;
  right: 15px !important;
  background: #ff007f;
  color: white;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  border: 2px solid #1a1a2e;
  animation: blink-text 1.5s infinite;
  z-index: 50 !important;
}

[id].is-live-active h2, 
[id].is-live-active h3,
[id].is-live-active p,
[id].is-live-active span {
  color: #fff !important;
  text-shadow: 0 0 5px rgba(255, 0, 127, 0.5);
}

[id].is-live-active span.inline-flex {
  background: #ff007f !important;
  color: white !important;
  box-shadow: 0 0 10px #ff007f;
}

[id].is-live-active > * {
  position: relative;
  z-index: 1;
}

/* --- Bloques Especiales --- */
div.bg-\[color\:var\(--brand\)\] {
  background: linear-gradient(135deg, #2a2a4a 0%, #151525 100%) !important;
  border: 1px solid var(--neon-purple) !important;
  position: relative;
}

div.bg-\[color\:var\(--brand\)\] h2 {
  color: #fff !important;
  text-shadow: 0 0 10px var(--neon-purple);
  position: relative; 
  z-index: 1;
}

div.bg-\[color\:var\(--brand\)\] span.inline-flex {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

div.bg-\[color\:var\(--brand\)\]:hover span.inline-flex {
  background: var(--neon-pink) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: scale(1.15) rotate(-2deg);
  box-shadow: 0 0 20px var(--neon-pink), 0 0 40px rgba(255, 0, 127, 0.4);
}

div.bg-\[color\:var\(--brand\)\]:hover svg {
  color: var(--neon-purple);
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 8px var(--neon-purple));
  transition: all 0.4s ease;
}

/* --- Bloques Especiales + Estado EN VIVO --- */
div.bg-\[color\:var\(--brand\)\][id].is-live-active::before {
  content: '';
  position: absolute;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 15px !important;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(162, 155, 254, 0.3) 50%,
    rgba(255, 255, 255, 0) 70%
  ) !important;
  background-size: 200% 100% !important;
  animation: shine-sweep 3s linear infinite !important;
  z-index: 0;
  pointer-events: none;
}

/* --- Botones --- */
a[href^="docs/"] {
  background: transparent !important;
  border: 1px solid var(--neon-purple) !important;
  color: var(--neon-purple) !important;
  border-radius: 6px;
  font-family: monospace;
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

a[href^="docs/"]:hover {
  background: var(--neon-purple) !important;
  color: #000 !important;
  box-shadow: 0 0 20px var(--neon-purple);
  transform: translateY(-2px);
}

/* --- Footer --- */
footer {
  background: rgba(10, 10, 18, 0.8) !important;
  backdrop-filter: blur(15px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer p {
  color: var(--text-muted);
}

footer img {
  filter: grayscale(1) brightness(1.5);
  opacity: 0.6;
  transition: var(--transition-smooth);
}

footer img:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  opacity: 1;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neon-purple);
}
/* --- CONFIGURACIÓN DEL VIDEO --- */
.video-background {
  position: fixed;
  inset: 0;
  z-index: -30;
  background-color: var(--bg-dark); /* Color de respaldo */
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  opacity: 0.4; /* Sutil para no distraer de la agenda */
}

.video-tint {
  position: absolute;
  inset: 0;
  /* Aplicamos el azul profundo como tinte */
  background-color: rgba(15, 20, 49, 0.75); 
  z-index: -25;
}

/* --- RE-ESTILIZADO DEL FOOTER (Muestra 2) --- */
footer {
  background-color: var(--footer-brand) !important;
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.subfooter {
  background-color: rgba(0, 0, 0, 0.2); /* Oscurece un poco el fondo del copy */
  padding: 15px 0;
  font-size: 0.7rem;
  letter-spacing: 2px;
}

/* --- AJUSTE DE LA CAPA OVERLAY --- */
.white-overlay {
  position: fixed;
  inset: 0;
  z-index: -10;
  /* Degradado que se funde con el azul medianoche */
  background: radial-gradient(circle at 50% 0%, rgba(85, 82, 141, 0.2), transparent 70%),
              linear-gradient(to bottom, transparent, var(--bg-dark));
  backdrop-filter: blur(12px); /* Efecto Glassmorphism premium */
}

/*Separacion header*/
main {
  /* 120px suele ser el "punto dulce" para headers sticky */
  padding-top: 120px !important; 
}

/* Si tienes una sección específica de patrocinadores arriba */
#patrocinadores, .section-sponsors {
  margin-bottom: 60px; /* Separa los patrocinadores de la agenda */
}

main::before {
  content: '';
  position: fixed;
  top: 80px; 
}

/* --- Botones PDF: Estilo Resonance + Rayo de Luz --- */
a[href^="docs/"] {
  position: relative;
  overflow: hidden; /* Crucial para que el rayo no se salga */
  
  /* Dimensiones y Base */
  padding: 8px 22px !important;
  background: transparent !important;
  border: 1px solid #bd00ff !important;
  color: #fff !important;
  
  /* Tipografía */
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 30px !important;
  text-decoration: none;
  
  /* Transiciones */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1;
  cursor: pointer;
}

/* El Rayo de Luz (Invisible al inicio) */
a[href^="docs/"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;

  /* Brillo blanco semitransparente */
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );

  transform: skewX(-25deg);
  pointer-events: none;
  z-index: -1;
}

/* Efecto Hover: Fondo Morado + Sombras */
a[href^="docs/"]:hover {
  background: #bd00ff !important;
  box-shadow: 0 0 20px rgba(189, 0, 255, 0.6);
  transform: translateY(-2px);
  color: #fff !important;
}

/* Disparar la animación del brillo al hacer hover */
a[href^="docs/"]:hover::after {
  animation: shine-effect 0.8s ease-in-out forwards;
}

/* Definición de la Animación del Brillo */
@keyframes shine-effect {
  0% {
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

/* --- Efecto Resonance para Imagen de Patrocinadores --- */
.sponsor-resonance-card {
  display: block;
  position: relative;
  overflow: hidden; /* Mantiene el zoom dentro del recuadro */
  border: 1px solid rgba(162, 155, 254, 0.2) !important; /* Borde inicial sutil */
  border-radius: 1rem; /* Ajustado a rounded-2xl de Tailwind */
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--bg-card);
}

.sponsor-resonance-card:hover {
  /* Brillo neón fucsia/morado según tu referencia de speakers */
  box-shadow: 0 0 40px rgba(189, 0, 255, 0.5);
  border-color: #bd00ff !important;
  transform: translateY(-5px);
  z-index: 10;
}

.sponsor-resonance-card img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: block;
  width: 100%;
}

.sponsor-resonance-card:hover img {
  transform: scale(1.1); /* Efecto de acercamiento suave */
  filter: brightness(1.1); /* Un poco de luz extra al logo */
}

/* --- EFECTO DE INTERACCIÓN GLOBAL (Tracks, Breaks, Networking) --- */

/* Selector para todos los bloques con ID (Agenda Items) */
[id].group, 
div.bg-\[color\:var\(--brand\)\],
.rounded-2xl {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative;
  z-index: 1;
}

/* Efecto Hover Universal */
[id].group:hover, 
div.bg-\[color\:var\(--brand\)\]:hover,
.rounded-2xl:hover {
  /* Brillo Neón Morado/Fucsia */
  box-shadow: 0 0 40px rgba(189, 0, 255, 0.4), 0 15px 50px rgba(0, 0, 0, 0.6) !important;
  
  /* Borde Vibrante */
  border-color: #bd00ff !important;
  
  /* Elevación y Zoom sutil del bloque */
  transform: translateY(-5px) scale(1.01);
  z-index: 10 !important;
}

/* Efecto específico para las imágenes dentro de los tracks (si las hay) */
[id].group:hover img,
div.bg-\[color\:var\(--brand\)\]:hover img {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* --- Ajuste para los "Puntos de Energía" --- */
/* Si el bloque tiene un icono o badge, que también reaccione */
[id].group:hover .flex.h-12.w-12,
div.bg-\[color\:var\(--brand\)\]:hover .flex.h-12.w-12 {
  background: #bd00ff !important;
  box-shadow: 0 0 20px #bd00ff;
  transform: rotate(-5deg) scale(1.1);
}